<template>
    <div class="my-header">
        <header class="app-header navbar header-container">
            <button class="navbar-toggler mobile-sidebar-toggler d-lg-none" type="button" @click="mobileSidebarToggle">
                &#9776;
            </button>
            <a class="navbar-brand" href="#"></a>

            <ul class="nav navbar-nav ml-auto">
                <li class="nav-item d-md-down-none">
                    <a class="nav-link" href="javascript:void(0)">
                        <i class="icon-bell"></i><span class="badge badge-pill badge-danger" v-if="sysMsgNum>0">{{sysMsgNum}}</span>
                    </a>
                </li>

                <li class="nav-item d-md-down-none">
                    <img src="static/img/avatars/6.jpg" class="img-avatar" @click="showUserInfoModal"
                         alt="admin@bootstrapmaster.com">
                </li>
                <li class="nav-item d-md-down-none">
                    <a class="nav-link" href="#"><i class="icon-list"></i></a>
                </li>
            </ul>

            <div v-if="isShowModal">
                <user-info-comp @close-modal="closeModal"></user-info-comp>
            </div>

        </header>
    </div>
</template>

<script>

    import userInfoComp from './header/userInfoComp.vue'
    import {dropdown} from 'vue-strap'
    // 发送ajax 请求的组件
    import getData from '../../api/getData'

    const timer1 = 30 * 1000;

    export default {
        components: {
            userInfoComp,
            dropdown
        },
        data: function () {
            return {
                isShowModal: false,
                //推送的系统消息数量
                sysMsgNum: Number
            }
        },
        mounted: function () {
            //每30秒轮询一次已登录过后的用户
            var self = this;
            setInterval(function () {
                getData.get("getSysMessageNum").then(function (response) {
                    self.sysMsgNum = response.data.data;
                })
                    .catch(function (response) {
                        console.log(response);
                    });
            }, timer1)
        },
        methods: {
            // 显示用户信息
            showUserInfoModal (e) {
                this.isShowModal = true;
            },
            // 显示用户信息
            closeModal (e) {
                this.isShowModal = false;
            },
            sidebarToggle (e) {
                e.preventDefault()
                document.body.classList.toggle('sidebar-hidden')
            },
            mobileSidebarToggle (e) {
                e.preventDefault()
                document.body.classList.toggle('sidebar-mobile-show')
            },
            asideToggle (e) {
                e.preventDefault()
                document.body.classList.toggle('aside-menu-hidden')
            }
        }
    }

</script>

<style lang="scss" scoped="">
    .my-header {
        background-color: #fff;
        border-bottom: 1px solid #cfd8dc;
        .navbar-brand {
            border-bottom: none;
        }
    }

    .app-header.navbar {
        border-bottom: none;
    }

    .header-fixed .app-header {
        position: relative;
        z-index: 1;
    }

    .header-container {
        width: 1200px;
        margin: 0 auto;
    }
</style>
